<template>
  <div class="alarmQuery">
    <!-- 查询条件 -->
    <el-form ref="searchForm" :model="searchForm" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="7">
          <el-form-item label="名称" prop="keyWord">
            <el-input v-model="searchForm.keyWord" placeholder="请输入告警名称\系统名称\资源名称\故障描述" maxlength="30" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="告警等级" prop="alarmLevelId">
            <el-select v-model="searchForm.alarmLevelId" placeholder="请选择告警等级" clearable>
              <el-option v-for="item in alarmLevelList" :key="item.dictKey" :label="item.dictValue"
                :value="item.dictKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="告警状态" prop="alarmStatus">
            <el-select v-model="searchForm.alarmStatus" placeholder="请选择告警状态" clearable>
              <el-option v-for="item in alarmStatusList" :key="item.dictKey" :label="item.dictValue"
                :value="item.dictKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="数据来源" prop="alarmSource">
            <el-select v-model="searchForm.alarmSource" placeholder="请选择数据来源" clearable>
              <el-option v-for="item in alarmSourceList" :key="item.dictKey" :label="item.dictValue"
                :value="item.dictKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="告警时间" prop="timeRange">
            <el-date-picker type="datetimerange" placeholder="请输入告警时间" v-model="searchForm.timeRange"
              format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期"
              style="width:400px;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="submitForm">查 询</el-button>
          <el-button @click="reset">重 置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表 -->
    <div class="tableBox">
      <el-table :data="tableList" border style="width: 100%;" height="730px">
        <el-table-column label="告警名称" prop="alarmName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="系统名称" prop="name" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="资源名称" prop="resourceName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="告警等级" prop="alarmLevel" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="告警时间" prop="createTime" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="数据来源" prop="alarmSource" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.alarmSource == '1'">业务数据</div>
            <div v-else-if="scope.row.alarmSource == '2'">监控数据</div>
            <div v-else>{{ scope.row.alarmSource }}</div>
          </template>
        </el-table-column>
        <el-table-column label="告警状态" prop="alarmStatus" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.alarmStatus == '0'" class="status-color status-color1"><span></span> 告警中</div>
            <div v-else-if="scope.row.alarmStatus == '1'" class="status-color status-color2"><span></span> 已确认</div>
            <div v-else-if="scope.row.alarmStatus == '2'" class="status-color status-color3"><span></span> 处理中</div>
            <div v-else-if="scope.row.alarmStatus == '3'" class="status-color status-color4"><span></span> 关闭</div>
            <div v-else>{{ scope.row.alarmStatus }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button class="operation-btn" type="text" size="mini" @click="detailsClick(scope.row)">详情</el-button>
            <el-button v-if="scope.row.alarmStatus != '3'" class="operation-btn" type="text" size="mini"
              @click="handleClick(scope.row)">处置</el-button>
            <el-button v-if="scope.row.alarmStatus == '2'" class="operation-btn" type="text" size="mini"
              @click="closeClick(scope.row)">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right" background @current-change="pageNumChange" @size-change="pageSizeChange"
        :current-page="pageNum" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :total="total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!-- 处置 -->
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="40%" style="margin-top: 15vh;"
      :before-close="closeDialogVisible">
      <div class="descriptions">
        <el-descriptions :column="2" border>
          <el-descriptions-item>
            <template slot="label"> 煤矿名称 </template>
            {{ detailsList.mkName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 告警名称 </template>
            {{ detailsList.alarmName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 系统名称 </template>
            {{ detailsList.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 资源名称 </template>
            {{ detailsList.resourceName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 数据来源 </template>
            {{ detailsList.alarmSource == '1' ? '业务数据' : '监控数据' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 告警等级 </template>
            {{ detailsList.alarmLevel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 告警状态 </template>
            {{ detailsList.alarmStatus == '0' ? '告警中' : detailsList.alarmStatus == '1' ? '已确认' : detailsList.alarmStatus ==
              '2' ? '处理中' : detailsList.alarmStatus == '3' ? '关闭' : detailsList.alarmStatus }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 告警时间 </template>
            {{ detailsList.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 处理方式 </template>
            <el-input v-model="detailsList.handlingMethod" placeholder="请输入处理方式"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 处理人 </template>
            {{ userName }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="bottomBox">
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template slot="label"> 处理意见 </template>
              <el-input type="textarea" :rows="3" placeholder="请输入处理意见" v-model="detailsList.handlingSuggestions"
                resize="none">
              </el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-if="!isDetails" slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button @click="closeDialogVisible">取 消</el-button>
          <el-button type="primary" @click="handle">处理</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectByCode, alarmInfo, alarmUpdate, alarmStop } from "@/api/oneself/alarmQuery";
import moment from 'moment';

export default {
  name: "alarmQuery",
  data() {
    return {
      // 查询条件
      alarmLevelList: [],
      alarmStatusList: [
        {
          dictKey: '0',
          dictValue: '告警中'
        }, {
          dictKey: '1',
          dictValue: '已确认'
        }, {
          dictKey: '2',
          dictValue: '处理中'
        }, {
          dictKey: '3',
          dictValue: '已关闭'
        }
      ],
      alarmSourceList: [
        {
          dictKey: '1',
          dictValue: '业务数据'
        }, {
          dictKey: '2',
          dictValue: '监控数据'
        }
      ],
      searchForm: {
        keyWord: '',
        alarmSource: '',
        alarmLevelId: '',
        alarmStatus: '',
        timeRange: [],
        // timeRange:[moment(new Date().getTime() - 3600000 * 24 * 3).format('YYYY-MM-DD HH:mm:ss'), moment(new Date()).format('YYYY-MM-DD HH:mm:ss')],
      },
      rules: {},
      // 列表
      tableList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 处置弹框
      dialogVisible: false,
      detailsList: {},
      isDetails: true,
      dialogTitle: '告警详情',
      userName: localStorage.getItem('username'),
    };
  },
  methods: {
    async processingData() {
      const parameter = {
        id: this.detailsList.id,
        handlingMethod: this.detailsList.handlingMethod,
        handlingSuggestions: this.detailsList.handlingSuggestions,
      };
      const data = await alarmUpdate(parameter);
      if (data && data.code === 200) {
        this.$message.success('处理成功')
        this.closeDialogVisible();
        this.queryList();
      } else {
        this.$message.error(data.message)
      }
    },
    handle() {
      if (
        this.detailsList.handlingSuggestions == undefined ||
        this.detailsList.handlingSuggestions === ""
      ) {
        this.$message.error("请填写处理意见");
        return;
      } else {
        this.processingData()
      }
    },
    // 打开处置弹框
    handleClick(row) {
      this.dialogVisible = true
      this.detailsList = row;
      this.isDetails = false;
      this.dialogTitle = '处置详情';
    },
    // 打开详情弹框
    detailsClick(row) {
      this.dialogVisible = true
      this.detailsList = row;
      this.isDetails = true;
      this.dialogTitle = '告警详情';
    },
    // 关闭弹框
    closeDialogVisible() {
      this.dialogVisible = false;
    },
    // 关闭告警
    closeClick(row) {
      this.$confirm('是否关闭此条告警?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.closeAlarm(row)
      });
    },
    async closeAlarm(row) {
      const data = await alarmStop({ id: row.id, });
      if (data && data.code === 200) {
        this.$message.success('关闭成功')
        this.queryList();
      } else {
        this.$message.error(data.message)
      }
    },
    // 查询
    submitForm() {
      this.$refs["searchForm"].validate(valid => {
        if (valid) {
          this.queryList(1);
        }
      });
    },
    // 重置
    reset() {
      this.$set(this.$data, 'searchForm', {});
      this.pageNum = 1;
      this.pageSize = 10;
      this.queryList();
    },
    // 分页
    pageNumChange(num) {
      this.pageNum = num;
      this.queryList();
    },
    pageSizeChange(size) {
      this.pageSize = size;
      this.queryList();
    },
    // 列表请求
    async queryList() {
      let pam = {
        ...this.searchForm,
        startTime: this.searchForm.timeRange ? this.searchForm.timeRange[0] ? moment(this.searchForm.timeRange[0]).format('YYYY-MM-DD HH:mm:ss') : '' : '',
        endTime: this.searchForm.timeRange ? this.searchForm.timeRange[1] ? moment(this.searchForm.timeRange[1]).format('YYYY-MM-DD HH:mm:ss') : '' : '',
      }
      let pam2 = {
        current: this.pageNum,
        size: this.pageSize,
      }
      const data = await alarmInfo(pam, pam2);
      if (data && data.code === 200) {
        this.tableList = data.body.records;
        this.total = data.body.total;
      } else {
        this.$message.error(data.message);
      }
    },
    // 枚举接口
    async queryEnumeration(enumCode, list) {
      let params = {
        code: enumCode
      }
      const data = await selectByCode(params);
      if (data && data.code === 200) {
        this[list] = data.body;
      } else {
        this.$message.error(data.message);
      }
    },
  },
  created() {
    this.queryList(1);
    this.queryEnumeration('ALARM_LEVEL', 'alarmLevelList');
  },
  mounted() {

  },
  beforeDestroy() { },
};
</script>

<style scoped lang="scss">
.alarmQuery {
  width: 100%;
  height: 100%;
  padding: 20px;

  .operation-btn {
    margin: 0 10px;
  }

  .status-color {
    span {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 5px;
      border-radius: 50%;
    }
  }

  .status-color1 {
    color: #FF9502;

    span {
      background: #FF9502;
    }
  }

  .status-color2 {
    color: #4BD964;

    span {
      background: #4BD964;
    }
  }

  .status-color3 {
    color: #59C8FA;

    span {
      background: #59C8FA;
    }
  }

  .status-color4 {
    color: #999999;

    span {
      background: #999999;
    }
  }
}
</style>
